﻿/* File Created: abril 21, 2013 */

$(document).ready(function () {
    $('#btnAgregarUsuario').button();

    cargarUsuarios();

    function cargarUsuarios() {
        $.post(window.location.href, { action: 'CrearContenidoUsuarios' }, function (response) {
            $('#divUsuarios').html(response);
            $('#divUsuarios').show('fade', 500);

            modificarUsuarios();
            eliminarUsuario();
        });
    }

    function modificarUsuarios() {
        $('#tblUsuarios').on({
            click: function () {
                var boton = $(this);

                var id = boton.attr('data-id');
                var nombre = boton.attr('data-nombre');
                var nickname = boton.attr('data-nombreUsuario');
                var correo = boton.attr('data-email');

                var renderModal = '<table>' +
                                    '<tr>' +
                                    '<td>Nombre: </td><td><input type="text" id="txtNombre" maxlength="30" value="' + nombre + '" /></td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>Nombre de usuario: </td><td><input type="text" id="txtNombreUsuario" maxlength="30" value="' + nickname + '" /></td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>Email: </td><td><input type="text" id="txtEmail" maxlength="50" value="' + correo + '" /></td>' +
                                    '</tr>' +
                                    '</table>';

                $('#modal').html(renderModal);

                $('#modal').dialog({
                    title: 'Modificación de usuario',
                    resizable: false,
                    draggable: false,
                    modal: true,
                    width: 350,
                    height: 300,
                    show: {
                        effect: "blind",
                        duration: 300
                    },
                    hide: {
                        effect: "blind",
                        duration: 300
                    },
                    buttons: {
                        Aceptar: function () {
                            var nombreUsuario = $('#txtNombre').val();
                            var nick = $('#txtNombreUsuario').val();
                            var email = $('#txtEmail').val();
                            $.post(window.location.href, { action: 'ModificarUsuario', id: id, nombre: nombreUsuario, nombreUsuario: nick, email: email }, function (response) {
                                dialogo(response);
                                cargarUsuarios();
                            });
                        },
                        Cancelar: function () {
                            $(this).dialog('close');
                        }
                    }
                });
            }
        }, 'span#editarUsuario');
    }

    function eliminarUsuario() {
        $('#tblUsuarios').on({
            click: function () {
                var boton = $(this);

                var id = boton.attr('data-id');

                $('#modal').html('¿Está seguro que desea eliminar este usuario?');

                $('#modal').dialog({
                    title: 'Eliminación de usuario',
                    resizable: false,
                    draggable: false,
                    modal: true,
                    width: 400,
                    height: 150,
                    show: {
                        effect: "blind",
                        duration: 300
                    },
                    hide: {
                        effect: "blind",
                        duration: 300
                    },
                    buttons: {
                        Aceptar: function () {
                            $.post(window.location.href, { action: 'EliminarUsuario', id: id }, function (response) {
                                dialogo(response);
                                cargarUsuarios();
                            });
                        },
                        Cancelar: function () {
                            $(this).dialog('close');
                        }
                    }
                });
            }
        }, 'span#eliminarUsuario');
    }

    $('#btnAgregarUsuario').click(function () {

        var renderModal = '<table>' +
                                    '<tr>' +
                                    '<td>Nombre: </td><td><input type="text" id="txtNombre" maxlength="30" /></td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>Nombre de usuario: </td><td><input type="text" id="txtNombreUsuario" maxlength="30" /></td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>Email: </td><td><input type="text" id="txtEmail" maxlength="50" /></td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>Contraseña: </td><td><input type="text" id="txtPassword" maxlength="10" /></td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>Confirmar contraseña: </td><td><input type="text" id="txtConfirmarPassword" maxlength="10" /></td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td colspan="2"><span id="lblDoNotMatch" style="display:none; color:red;">* Contraseñas no coinciden</span></td>' +
                                    '</tr>' +
                                    '</table>';

        $('#modal').html(renderModal);

        $('#modal').dialog({
            title: 'Crear nuevo usuario',
            resizable: false,
            draggable: false,
            modal: true,
            width: 300,
            height: 350,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            },
            buttons: {
                Aceptar: function () {

                    if ($('#txtNombre').val() == '') {
                        $('#txtNombre').focus();
                        return false;
                    }

                    if ($('#txtNombreUsuario').val() == '') {
                        $('#txtNombreUsuario').focus();
                        return false;
                    }

                    if ($('#txtEmail').val() == '') {
                        $('#txtEmail').focus();
                        return false;
                    }

                    if ($('#txtPassword').val() == '') {
                        $('#txtPassword').focus();
                        return false;
                    }

                    if ($('#txtConfirmarPassword').val() == '') {
                        $('#txtConfirmarPassword').focus();
                        return false;
                    }

                    if ($('#txtPassword').val() != $('#txtConfirmarPassword').val()) {
                        $('#lblDoNotMatch').show();
                        return false;
                    }

                    $.post(window.location.href, { action: 'RegistrarUsuario', nombre: $('#txtNombre').val(), nombreUsuario: $('#txtNombreUsuario').val(),
                        email: $('#txtEmail').val(), password: $('#txtPassword').val()
                    }, function (response) {
                        dialogo(response);
                        cargarUsuarios();
                    });

                    $(this).dialog('close');
                },
                Cancelar: function () {
                    $(this).dialog('close');
                }
            }
        });
    });

    function dialogo(mensaje) {
        $('#modal').dialog({
            title: 'Aviso',
            resizable: false,
            draggable: false,
            modal: true,
            width: 300,
            height: 200,
            show: {
                effect: "fade",
                duration: 200
            },
            hide: {
                effect: "fade",
                duration: 200
            },
            buttons: {
                Aceptar: function () {
                    $(this).dialog('close');
                }
            }
        }).html(mensaje);
    }
});